<template>
  <div>
    <h3>创建我的档案</h3>
    <el-divider></el-divider>
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-row>
        <el-col :span=12 :push=6>
          <el-form-item label="姓名">
            <el-input v-model="form.name" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=12 :push=6>
          <el-form-item label="身份证号">
            <el-input v-model="form.idNumber" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=6 :push=6>
          <el-form-item label="年龄">
            <el-input-number v-model="age" controls-position="right" :min="1" :max="100"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span=6 :push=6>
          <el-form-item label="出生日期">
            <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=6 :push=6>
          <el-form-item label="性别">
            <el-radio-group v-model="form.gender">
              <el-radio label="男" border>男</el-radio>
              <el-radio label="女" border>女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span=6 :push=6>
          <el-form-item label="婚姻状况">
            <el-radio-group v-model="form.maritalStatus">
              <el-radio label="1" border>已婚</el-radio>
              <el-radio label="0" border>未婚</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col  :span=6 :push=6>
          <el-form-item label="民族">
            <el-input v-model="form.nation" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col  :span=6 :push=6>
          <el-form-item label="政治面貌">
            <el-select v-model="form.politicsStatus" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=6 :push=6>
          <el-form-item label="是否在岗">
            <el-radio-group v-model="form.workStatus">
              <el-radio label="1" border>在岗</el-radio>
              <el-radio label="0" border>离岗</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span=6 :push=6>
          <el-form-item label="有无医保">
            <el-radio-group v-model="form.insuranceStatus">
              <el-radio label="1" border>有</el-radio>
              <el-radio label="0" border>无</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=6 :push=6>
          <el-form-item label="年总收入">
            <el-input v-model="form.salary" size="small" placeholder="单位:元"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span=6 :push=6>
          <el-form-item label="住房面积">
            <el-input v-model="form.livingSpace" size="small" placeholder="单位:平方米"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=6 :push=6>
          <el-form-item label="是否健康">
            <el-radio-group v-model="form.healthStatus">
              <el-radio label="1" border>是</el-radio>
              <el-radio label="0" border>否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col  :span=6 :push=6>
          <el-form-item label="疾病类型">
            <el-input v-model="form.illness" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=12 :push=6>
          <el-form-item label="致困原因">
            <el-select v-model="form.checked_reason" placeholder="请选致困原因" style="width: 100%">
              <el-option
                v-for="item in reasons"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=6 :push=6>
          <el-form-item label="邮编">
            <el-input v-model="form.postcode" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col  :span=6 :push=6>
          <el-form-item label="电子邮箱">
            <el-input v-model="form.email" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=6 :push=6>
          <el-form-item label="联系电话">
            <el-input v-model="form.phoneNumber" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span=6 :push=6>
          <el-form-item label="银行卡号">
            <el-input v-model="form.creditCardNumbers" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=4 :push=6>
          <el-form-item label="附件上传">
            <el-upload class="upload"
                       action="http://39.104.21.116:8989/record/uploadFile"
                       :on-preview="handlePreview"
                       :on-remove="handleRemove"
                       :before-remove="beforeRemove"
                       :on-success="uploadSuccess"
                       multiple
                       :limit="3"
                       auto-upload
                       :on-exceed="handleExceed"
                       :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">文件大小不超过10MB</div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span=6 :push=6>
          <el-form-item>
            <el-button @click="commitForm" type="primary">提交档案</el-button>
          </el-form-item>
        </el-col>
        <el-col :span=6 :push=4>
          <el-form-item>
            <el-button @click="cancelCommit" type="danger">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

import instance from "../../../utils/request";

export default {
  name: "CreateRecord",
  data(){
    return {
      reasons:[{
        value: 5,
        label:'子女上学'
      }, {
        value: 3,
        label: '家人重病'
      }, {
        value: 2,
        label: '本人失业'
      }, {
        value: 1,
        label: '本人重病'
      }, {
        value: 4,
        label: '自然灾害'
      }],
      age:1,
      form: {

      },
      options: [{
        value: 0,
        label: '中共党员'
      }, {
        value: 1,
        label: '中共预备党员'
      }, {
        value: 2,
        label: '共青团员'
      }, {
        value: '3',
        label: '民革会员'
      }, {
        value: '4',
        label: '民盟盟员'
      }, {
        value: '5',
        label: '民建会员'
      }, {
        value: '6',
        label: '民进会员'
      }, {
        value: '7',
        label: '农工党党员'
      }, {
        value: '8',
        label: '致公党党员'
      }, {
        value: '9',
        label: '九三学社社员'
      }, {
        value: '10',
        label: '台盟盟员'
      }, {
        value: '11',
        label: '无党派人士'
      }, {
        value: '12',
        label: '群众'
      }],
      fileList:[],
      isShowFile: false,
      rules: {
        name: [
          {}
        ],
        nation:[
          {}
        ],
        creditCardNumbers:[
          {}
        ],
        email:[
          {}
        ],
        idNumber:[
          {}
        ],
        illness:[
          {}
        ],
        livingSpace:[
          {}
        ],
        phoneNumber:[
          {}
        ],
        postcode:[
          {}
        ],
        salary:[
          {}
        ]
      }
    }
  },
  methods:{
    //移除文件方法
    handleRemove(file, fileList) {
      this.form.attachFile='';
    },
    //文件预览方法
    handlePreview(file) {
      console.log(file);
    },
    //文件超限方法
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    //移除之前方法
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    //上传成功提示方法
    uploadSuccess(response, file, fileList){
      if (response.code === 200) {
        this.isShowFile = true;
        console.log(response);
        var temp = response.data;
        this.form.attachFile = temp;
        return this.$message.success("上传成功！");
      }else {
        return this.$message.error('上传失败，请重试！');
      }
    },
    commitForm(){
      let _this = this;
      instance.post('/api/record/submit',{
        id:_this.form.id,
        name:_this.form.name,
        nation:_this.form.nation,
        gender:_this.form.gender,
        creditCardNumbers:_this.form.creditCardNumbers,
        email:_this.form.email,
        healthStatus:_this.form.healthStatus,
        idNumber:_this.form.idNumber,
        illness:_this.form.illness,
        insuranceStatus:_this.form.insuranceStatus,
        attachFile:_this.form.attachFile,
        birthday:_this.form.birthday,
        livingSpace:_this.form.livingSpace,
        maritalStatus:_this.form.maritalStatus,
        phoneNumber:_this.form.phoneNumber,
        politicsStatus:_this.form.politicsStatus,
        postcode:_this.form.postcode,
        salary:parseInt(_this.form.salary),
        stuckReasonIds:[_this.form.checked_reason],
        wid:_this.form.wid,
        workStatus:_this.form.workStatus,
        workUnit:'中国石油大学（北京）'
      }).then(function (res) {
        if(res.data.code === 200){
          alert('创建成功');
          _this.$store.commit('changeRecord_Status');
          _this.$store.commit('changeRecord_ApplyToFalse');
          _this.$router.push('/index/worker')
        }
        if(res.data.code === 201){
          console.log(res.data);
          alert('创建失败，请稍后再试');
          _this.$store.commit('changeRecord_ApplyToFalse');
          _this.$router.push('/index')
        }
      }).catch(function (err) {
        console.log(err);
        alert('出错啦');
      });
    },
    cancelCommit(){
      this.$router.push({name:'Record'});
    }
  }
}
</script>

<style scoped>

</style>
